import * as React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import s from './index.module.scss'
import { Dos } from '../../components'
import cars from '../../data/car_props/index'
import {useNavigate} from 'react-router-dom'
import { connect } from 'react-redux';
import * as actions from './store/action'
import { storeData } from '../../store/interface';
import 'swiper/css'
//swiper类型声明
import SwperClass from 'swiper';

interface homeProps{
   initSwiper:Array<string>;
   getInitSwiperDispatch:Function
}
function Home(props:homeProps){
   //console.log(props);
   let {initSwiper,getInitSwiperDispatch} = props
   let [currentItem, setCurrentItem] = React.useState(cars[0])
   let [lightHigth, setLightHigth] = React.useState(0)
   let to = useNavigate()
   function change(e:SwperClass) {
      //console.log(e);
      
      let { activeIndex } = e
      setLightHigth(activeIndex)
      setCurrentItem(cars[activeIndex])
   }
   React.useEffect(() => {
      if(!initSwiper.length){
         getInitSwiperDispatch()
      }
      
   }, [currentItem, lightHigth])
   return (
      <div className={s.page}>
        

            {/* 轮播图部分 */}
            <div className={s.swiper}>
            <Swiper className={s.swiperCom}
               spaceBetween={0}
               slidesPerView={1}
               onSlideChange={(e) => change(e)}
            //轮播图初次被加载时执行
            // onSwiper={(swiper) => console.log(swiper)}
            >
               {initSwiper.map((item:string, i:number) => {
                  return <SwiperSlide key={i}>

                     <img className={s.car} src={item} alt="" />

                  </SwiperSlide>
               })}
            </Swiper>
            </div>
            {/* 页面内容部分 */}
             <div className={s.content}>
               <div className={s.title}>
                  {currentItem.title}
               </div>

               <div className={s.descriptions}>
                  <div className={s.description}>
                     <div className={s.text}>
                        <span className={s.num}>
                           {currentItem.descriptions[0].num}
                        </span>
                        <span className={s.wenzi}>
                           {currentItem.descriptions[0].wenzi}
                        </span>
                     </div>
                     <div className={s.subtitle}>
                        {currentItem.descriptions[0].subscribe}
                     </div>
                  </div>
                  <div className={s.description}>
                     <div className={s.text}>
                        <span className={s.num}>
                           {currentItem.descriptions[1].num}
                        </span>
                        <span className={s.wenzi}>
                           {currentItem.descriptions[1].wenzi}
                        </span>
                     </div>
                     <div className={s.subtitle}>
                        {currentItem.descriptions[1].subscribe}
                     </div>
                  </div>
                  <div className={s.description}>
                     <div className={s.text}>
                        <span className={s.num}>
                           {currentItem.descriptions[2].num}
                        </span>
                        <span className={s.wenzi}>
                           {currentItem.descriptions[2].wenzi}
                        </span>
                     </div>
                     <div className={s.subtitle}>
                        {currentItem.descriptions[2].subscribe}
                     </div>
                  </div>
               </div>
               <div className={s.btn} onClick={()=>{to('/design',{state:currentItem});
               }}>
                  立即订购
               </div>
               {/* <div className={s.config}>
                  了解更多
               </div> */}
               <div className={s.dos}>
                  <Dos lightHigth={lightHigth} length={cars.length}></Dos>
               </div>
            </div> 
            <div className={s.video}>
               <div className={s.title}>
                  未来驾驶体验
               </div>
               <div className={s.des}>
                  车辆自动召唤，跑车级百公里加速度，在车里打游戏，免费到店体验特斯拉驾驶方式
               </div>
               <img src={"http://ri5jypmk3.hn-bkt.clouddn.com/home/video.jpg"} alt="" className={s.image} />
               <div className={s.btn}>
                  预约试驾
               </div>
            </div>
            <div className={s.store} onClick={()=>{to('/shop')}}>
               <img src={"http://ri5jypmk3.hn-bkt.clouddn.com/home/store.jpg"} alt=""  className={s.image}/>
            </div>
        
      </div>
   )

}
const mapStateToProps = (state:storeData) => {
   //console.log(state);
   
   return {
       initSwiper:state.home.initswiper
   }
}
const mapStateToDisPatch = (dispatch:Function) => {
   //console.log(dispatch);
   
   return {
       getInitSwiperDispatch(){
           dispatch(actions.getInitSwiper())
       }
   }
}
export default connect(mapStateToProps,mapStateToDisPatch)((Home))
